<template>
    <div id="cesiumContainer"></div>
    <div id="toolbar"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';
import CesiumThreejs3DGS from './cesium-threejs-3dgs.ts'

//地形数据下载 https://www.gscloud.cn/  高程数据    
//cesiumlab下载 http://www.cesiumlab.com/downcenter.html#version-content
//使用cesiumlab地形切片编辑

Cesium.Ion.defaultAccessToken = 
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZDIxN2UzMi0xYTg0LTRjNDgtYTU5Yi1kYmNlZDhjMjBiMWEiLCJpZCI6MjgzNDA2LCJpYXQiOjE3NDE4NTU5MDB9.0ZLnzk6f9THhivAcJ739cKVUV8Q33q_PduC_wQ6G_oI'

window.CESIUM_BASE_URL = '/';
//设置默认位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,20.4,110.4,61.2);
onMounted(async () => {
    var viewer = new Cesium.Viewer("cesiumContainer",{
        infoBox:false, //信息框
        terrainProvider:  await Cesium.createWorldTerrainAsync({
            requestVertexNormals: true,
            requestWaterMask: true,
        }), //默认地形
        // terrainProvider: await Cesium.CesiumTerrainProvider({
        //     url:''
        // }), //自定义地形

        geocoder:false, //搜索框
        homeButton:false, //返回按钮
        sceneModePicker:false, //2D/3D切换按钮
        baseLayerPicker:false, //图层切换按钮
        navigationHelpButton:false, //帮助按钮
        animation:false,
        timeline:false,
        fullscreenButton:false,
    });
    viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏版权信息

    //键盘事件
    // document.addEventListener("keydown", function (e) {
    //     var moveRate = viewer.camera.positionCartographic.height/100;
    //     switch (e.key) {
    //         case 'z':
    //             viewer.camera.moveForward(moveRate);
    //             break;
    //         case 'c':
    //             viewer.camera.moveBackward(moveRate);
    //             break;
    //         case 'a':
    //             viewer.camera.moveLeft(moveRate);
    //             break;
    //         case 'd':
    //             viewer.camera.moveRight(moveRate);
    //            break;
    //         case 'w':
    //             viewer.camera.moveUp(moveRate);
    //             break;
    //         case 's':
    //             viewer.camera.moveDown(moveRate);
    //             break;
    //     }
    // });

    //添加自定义模型
    const cesiumThreejs3DGS = new CesiumThreejs3DGS(viewer)
    const options = [
      {
        text: "Naka Island",
        onselect: async () => {
          await cesiumThreejs3DGS.remove3dgsAll()
          cesiumThreejs3DGS.load3dgs(
            {
              splatUrl: "./nakajima.ksplat",
              lat: 23.118577,
              lon: 113.277923,
              height: 40,
              headingPitchRoll: { heading: 37, pitch: 180, roll: 0 },
              scale: 45,
              camera: {
                offset: { x: 150, y: -70, z: 30 },
                headingPitchRoll: { heading: -20, pitch: -10, roll: 0 }
              }
            }
          )
        },
      },
    ]
    viewer.scene.postRender.addEventListener(() => {
      cesiumThreejs3DGS.renderThreeObj()
    })

    Sandcastle.addToolbarMenu(options)
    Sandcastle.finishedLoading();
})



    //天地图
    ////矢量底图
    // const webKey = "501ce352def0a0bcb294848b52b89115";
    // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+webKey,
    //         layer: "tdtVecBasicLayer",
    //         style: "default",
    //         format: "image/jpeg",
    //         tileMatrixSetID: "GoogleMapsCompatible",
    //         show: false
    // }));
    // //矢量注记
    // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+webKey,
    //     layer: "tdtAnnoLayer",
    //     style: "default",
    //     format: "image/jpeg",
    //     tileMatrixSetID: "GoogleMapsCompatible"
    // }));

    // //影像底图
    // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+webKey,
    //         layer: "tdtBasicLayer",
    //         style: "default",
    //         format: "image/jpeg",
    //         tileMatrixSetID: "GoogleMapsCompatible",
    //         show: false
    // }));

    // //影像注记
    // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    // url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+webKey,
    //     layer: "tdtAnnoLayer",
    //     style: "default",
    //     format: "image/jpeg",
    //     tileMatrixSetID: "GoogleMapsCompatible",
    //     show: false
    // }));

    //OSM地图
    // viewer.imageryLayers.addImageryProvider(
    //     new Cesium.OpenStreetMapImageryProvider({
    //         url: "https://a.tile.openstreetmap.org/"
    //     })
    // );

    //相机
    // viewer.camera.setView({
    // });
    //移动到指定位置
    // viewer.camera.flyTo({
    //     destination: Cesium.Cartesian3.fromDegrees(113.277923,23.118577, 10000),
    //     orientation: {
    //         heading: Cesium.Math.toRadians(0), //朝向
    //         pitch: Cesium.Math.toRadians(-90), //俯仰
    //         roll: 0.0
    //     },
    //     duration: 3 //移动时间
    // });


    //添加overlay
    // var point = viewer.entities.add({
    //     position: Cesium.Cartesian3.fromDegrees(113.277923,23.118577,1000),
    //     point:{
    //         pixelSize: 10,
    //         color: Cesium.Color.RED,
    //         outlineColor: Cesium.Color.WHITE,
    //         outlineWidth: 2,
    //         disableDepthTestDistance:Number.POSITIVE_INFINITY
    //     }
    //     // billboard:{
    //     //     image:'../marker.png',
    //     //     width: 32,
    //     //     height: 32
    //     // }
    // });

    //添加默认3d模型
    // const osmBuildings = await Cesium.createOsmBuildingsAsync();
    // viewer.scene.primitives.add(osmBuildings);

    // viewer.scene.primitives.add(new Cesium.Primitive({
    //     geometryInstances: new Cesium.GeometryInstance({
    //         geometry: new Cesium.RectangleGeometry({
    //             rectangle: Cesium.Rectangle.fromDegrees(116.2, 39.9, 116.5, 40.1),
    //             vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    //         })
    //     })
    // }))

    //添加文字标签
    // var label1 = viewer.entities.add({
    //     position: Cesium.Cartesian3.fromDegrees(113.277923,23.118577, 100),
    //     label: {
    //         text: '广州之光',
    //         font: '20px sans-serif',
    //         fillColor: Cesium.Color.WHITE,
    //         outlineColor: Cesium.Color.BLACK,
    //         outlineWidth: 4,
    //         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    //         pixelOffset: new Cesium.Cartesian2(0, -24),
    //         horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
    //         verticalOrigin:Cesium.VerticalOrigin.BOTTOM
    //     },
    //     billboard: {
    //         image: '../location.png',
    //         width: 50,
    //         height: 50,
    //         horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    //         verticalOrigin: Cesium.VerticalOrigin.BOTTOM
    //     }
    // });




//坐标转换实例
function testLocationTransform(){
        //坐标转换，屏幕坐标 - 地理坐标转换wgs-84 - 三维坐标
    //经纬度转坐标
    var cartesian = Cesium.Cartesian3.fromDegrees(121.07,32.05,100);
    console.log(cartesian);
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    console.log(cartographic);

    //角度弧度转换
    var radiues = Cesium.Math.toRadians(90);
    console.log(radiues);
    var degress = Cesium.Math.toDegrees(radiues);
    console.log(degress);
}

</script>

<style>
#cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
}

#toolbar {
    position: absolute; /* 绝对定位 */
    top: 10px;          /* 距离顶部 10px */
    left: 10px;         /* 距离左侧 10px */
    z-index: 1000;      /* 确保 toolbar 显示在最上层 */
    background-color: rgba(255, 255, 255, 0.8); /* 背景色 */
    padding: 8px;       /* 内边距 */
    border-radius: 4px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影 */
}

.cesium-viewer-bottom,
.cesium-viewer-toolbar,
.cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer,
.cesium-viewer-fullscreenContainer {
    z-index: 100;
}
</style>